<template>
  <div class="searchlist">
    <Loading v-if="searchloading"></Loading>
    <template v-else>
      <ul>
        <li
          v-for="item in searchlist"
          :key="item.r.id"
          @click="$router.push({ path: '/detail?id=' + item.r.id })"
        >
          <div
            class="image"
            :style="{ backgroundImage: 'url(' + item.r.img + ')' }"
          ></div>
          <div class="text">
            <h3>{{ item.r.n }}</h3>
            <p>
              <span v-if="item.r.rate">{{ item.r.rate.toFixed(1) }}分</span
              ><span v-if="item.r.recommend_label">
                · {{ item.r.recommend_label }}</span
              >
            </p>
            <div class="tags" v-if="item.r.recipe_list_tags">
              <span
                v-for="(item1, index) in item.r.recipe_list_tags"
                :key="index + Math.random()"
                :style="{
                  backgroundImage:
                    'linear-gradient(to right, ' +
                    item1.background_start_color +
                    ',' +
                    item1.background_end_color +
                    ')',
                  color: item1.text_color,
                }"
                >{{ item1.text }}</span
              >
            </div>
            <div class="user">
              <div
                class="uimg"
                :style="{ backgroundImage: 'url(' + item.r.a.p + ')' }"
              ></div>
              <span>{{ item.r.a.n }}</span>
            </div>
          </div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
export default {
  components: {
    Loading,
  },
  props: ["searchlist", "searchloading"],
  methods: {},
};
</script>

<style lang="less" scoped>
.searchlist {
  ul {
    li {
      //   display: flex;
      margin: 15px 0;
      &::after {
        content: "";
        display: block;
        clear: both;
      }
      .image {
        float: left;
        width: 40vw;
        height: 30vw;
        border-radius: 5px;
        background-size: cover;
        background-position: center;
        background-color: #f5f5f5;
      }
      .text {
        height: 30vw;
        // margin-left: 10px;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        h3 {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 5px;
        }
        p {
          font-size: 12px;
          //   color: #aaa;
          //   line-height: 30px;
          margin-bottom: 5px;
        }
        .tags {
          font-size: 12px;
          margin-bottom: 5px;
          span {
            display: inline-block;
            color: #777;
            padding: 3px 5px;
            transform-origin: left;
            transform: scale(0.8);
            border-radius: 3px;
          }
        }
        .user {
          display: flex;
          align-items: center;
          margin-top: 5px;
          .uimg {
            width: 15px;
            height: 15px;
            background-size: 100%;
            background-position: center;
            border-radius: 50%;
          }
          span {
            font-size: 12px;
            margin-left: 5px;
            color: #aaa;
          }
        }
      }
    }
  }
}
</style>